<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>管理后台 - 朋知云学</title>
    <link rel="stylesheet" href="../css/style.css">
    <link rel="stylesheet" href="../css/admin.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
    <!-- 引入Chart.js图表库 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@4.1.1/animate.min.css">
    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
    <style>
        /* 页面加载动画 */
        .page-loader {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.9);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.5s ease;
        }
        
        .loader {
            width: 50px;
            height: 50px;
            border: 5px solid #f3f3f3;
            border-top: 5px solid #5bc0eb;
            border-radius: 50%;
            animation: spin 1s linear infinite;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        /* 统计卡片动画 */
        .stat-card {
            transition: transform 0.3s ease;
        }
        
        .stat-card:hover {
            transform: translateY(-5px);
        }
        
        /* 实时数据标识 */
        .real-time-badge {
            display: inline-flex;
            align-items: center;
            gap: 5px;
            font-size: 14px;
            color: #28a745;
            background-color: #d4edda;
            padding: 4px 8px;
            border-radius: 4px;
            margin-left: 10px;
        }
        
        .real-time-badge i {
            font-size: 8px;
            animation: pulse 1.5s infinite;
        }
        
        @keyframes pulse {
            0% { opacity: 1; }
            50% { opacity: 0.5; }
            100% { opacity: 1; }
        }
        
        /* 通知系统样式 */
        .admin-notification {
            position: fixed;
            top: 20px;
            right: -320px;
            width: 300px;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            padding: 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 10000;
            transition: right 0.3s ease;
        }
        
        .admin-notification.show {
            right: 20px;
        }
        
        .admin-notification.closing {
            right: -320px;
        }
        
        .admin-notification.success {
            border-left: 4px solid #4caf50;
        }
        
        .admin-notification.warning {
            border-left: 4px solid #ff9800;
        }
        
        .admin-notification.error {
            border-left: 4px solid #f44336;
        }
        
        .admin-notification.info {
            border-left: 4px solid #2196f3;
        }
        
        .notification-content {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .notification-content i {
            font-size: 20px;
        }
        
        .notification-close {
            background: none;
            border: none;
            cursor: pointer;
            color: #999;
            font-size: 16px;
        }
        
        .notification-close:hover {
            color: #333;
        }
        
        /* 表格交互样式 */
        .table-actions .btn-icon {
            transition: all 0.2s ease;
        }
        
        .table-actions .btn-icon:hover {
            transform: scale(1.2);
        }
        
        /* 状态标签动画 */
        .status-badge {
            transition: all 0.3s ease;
        }
        
        .status-badge.status-approved {
            animation: fadeInGreen 0.5s ease;
        }
        
        .status-badge.status-rejected {
            animation: fadeInRed 0.5s ease;
        }
        
        @keyframes fadeInGreen {
            from { background-color: transparent; }
            to { background-color: #d4edda; }
        }
        
        @keyframes fadeInRed {
            from { background-color: transparent; }
            to { background-color: #f8d7da; }
        }
    </style>
</head>
<body>
    <!-- 页面加载动画 -->
    <div class="page-loader">
        <div class="loader"></div>
    </div>
    <!-- 管理员面板 -->
    <div class="admin-panel">朋知云学管理后台</div>
    
    <div class="admin-container">
        <!-- 侧边栏 -->
        <div class="admin-sidebar">
            <div class="admin-user">
                <div class="admin-user-info">
                    <div class="admin-username">管理员</div>
                    <div class="admin-role">超级管理员</div>
                </div>
            </div>
            
            <ul class="admin-sidebar-menu">
                <li class="admin-sidebar-item active">
                    <a href="dashboard.html" class="admin-sidebar-link">
                        <i class="bi bi-speedometer2"></i>
                        <span>控制台</span>
                    </a>
                </li>
                <li class="admin-sidebar-item">
                    <a href="users.html" class="admin-sidebar-link">
                        <i class="bi bi-people"></i>
                        <span>用户管理</span>
                    </a>
                </li>
                <li class="admin-sidebar-item">
                    <a href="demands.html" class="admin-sidebar-link">
                        <i class="bi bi-list-check"></i>
                        <span>需求管理</span>
                    </a>
                </li>
                <li class="admin-sidebar-item">
                    <a href="applications.html" class="admin-sidebar-link">
                        <i class="bi bi-file-earmark-text"></i>
                        <span>申请审核</span>
                    </a>
                </li>
                <li class="admin-sidebar-item">
                    <a href="settings.html" class="admin-sidebar-link">
                        <i class="bi bi-gear"></i>
                        <span>系统设置</span>
                    </a>
                </li>
                <li class="admin-sidebar-item">
                    <a href="../index.html" class="admin-sidebar-link">
                        <i class="bi bi-box-arrow-left"></i>
                        <span>返回前台</span>
                    </a>
                </li>
            </ul>
        </div>
        
        <!-- 主内容区 -->
        <div class="admin-content animate__animated animate__fadeIn">
            <div class="admin-header">
                <h1>控制台 <span class="real-time-badge"><i class="bi bi-circle-fill"></i> 实时数据</span></h1>
                <div class="admin-header-actions">
                    <div class="admin-search">
                        <i class="bi bi-search"></i>
                        <input type="text" placeholder="搜索..." id="admin-search-input">
                    </div>
                    <div class="admin-notifications">
                        <i class="bi bi-bell"></i>
                        <span class="badge">3</span>
                    </div>
                </div>
            </div>
            
            <!-- 统计卡片 -->
            <div class="admin-stats">
                <div class="stat-card">
                    <div class="stat-icon" style="background-color: #e3f2fd;">
                        <i class="bi bi-people" style="color: #2196f3;"></i>
                    </div>
                    <div class="stat-info">
                        <div class="stat-title">总用户数</div>
                        <div class="stat-value">1,254</div>
                        <div class="stat-change positive">
                            <i class="bi bi-arrow-up"></i>
                            <span>12% 较上月</span>
                        </div>
                    </div>
                </div>
                
                <div class="stat-card">
                    <div class="stat-icon" style="background-color: #e8f5e9;">
                        <i class="bi bi-file-earmark-text" style="color: #4caf50;"></i>
                    </div>
                    <div class="stat-info">
                        <div class="stat-title">支教需求</div>
                        <div class="stat-value">85</div>
                        <div class="stat-change positive">
                            <i class="bi bi-arrow-up"></i>
                            <span>8% 较上月</span>
                        </div>
                    </div>
                </div>
                
                <div class="stat-card">
                    <div class="stat-icon" style="background-color: #fff8e1;">
                        <i class="bi bi-clipboard-check" style="color: #ffc107;"></i>
                    </div>
                    <div class="stat-info">
                        <div class="stat-title">待审核申请</div>
                        <div class="stat-value">24</div>
                        <div class="stat-change negative">
                            <i class="bi bi-arrow-down"></i>
                            <span>5% 较上月</span>
                        </div>
                    </div>
                </div>
                
                <div class="stat-card">
                    <div class="stat-icon" style="background-color: #fce4ec;">
                        <i class="bi bi-check-circle" style="color: #e91e63;"></i>
                    </div>
                    <div class="stat-info">
                        <div class="stat-title">已完成支教</div>
                        <div class="stat-value">156</div>
                        <div class="stat-change positive">
                            <i class="bi bi-arrow-up"></i>
                            <span>15% 较上月</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 图表区域 -->
            <div class="admin-charts">
                <div class="chart-card">
                    <div class="chart-header">
                        <h3>用户增长趋势</h3>
                        <div class="chart-actions">
                            <select>
                                <option>最近7天</option>
                                <option>最近30天</option>
                                <option>最近90天</option>
                            </select>
                        </div>
                    </div>
                    <div class="chart-body">
                        <canvas id="userChart"></canvas>
                    </div>
                </div>
                
                <div class="chart-card">
                    <div class="chart-header">
                        <h3>支教需求分布</h3>
                        <div class="chart-actions">
                            <select>
                                <option>按地区</option>
                                <option>按学科</option>
                                <option>按时间</option>
                            </select>
                        </div>
                    </div>
                    <div class="chart-body">
                        <canvas id="demandChart"></canvas>
                    </div>
                </div>
            </div>
            
            <!-- 最近活动 -->
            <div class="admin-recent">
                <div class="recent-card">
                    <div class="recent-header">
                        <h3>最近申请</h3>
                        <a href="applications.html" class="view-all">查看全部</a>
                    </div>
                    <div class="recent-body">
                        <table class="admin-table">
                            <thead>
                                <tr>
                                    <th>申请人</th>
                                    <th>支教需求</th>
                                    <th>申请时间</th>
                                    <th>状态</th>
                                    <th>操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr>
                                    <td>
                                        <div class="user-info">
                                            <img src="../../static/avatar-default.png" alt="用户头像" class="user-avatar-sm">
                                            <span>张小明</span>
                                        </div>
                                    </td>
                                    <td>山区小学语文教师支教</td>
                                    <td>2023-09-15</td>
                                    <td><span class="status-badge status-pending">待审核</span></td>
                                    <td>
                                        <div class="table-actions">
                                            <button class="btn-icon" title="查看详情">
                                                <i class="bi bi-eye"></i>
                                            </button>
                                            <button class="btn-icon" title="通过">
                                                <i class="bi bi-check-circle"></i>
                                            </button>
                                            <button class="btn-icon" title="拒绝">
                                                <i class="bi bi-x-circle"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="user-info">
                                            <img src="../../static/avatar-default.png" alt="用户头像" class="user-avatar-sm">
                                            <span>李华</span>
                                        </div>
                                    </td>
                                    <td>乡村初中英语教师招募</td>
                                    <td>2023-09-14</td>
                                    <td><span class="status-badge status-approved">已通过</span></td>
                                    <td>
                                        <div class="table-actions">
                                            <button class="btn-icon" title="查看详情">
                                                <i class="bi bi-eye"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                                <tr>
                                    <td>
                                        <div class="user-info">
                                            <img src="../../static/avatar-default.png" alt="用户头像" class="user-avatar-sm">
                                            <span>王芳</span>
                                        </div>
                                    </td>
                                    <td>留守儿童课后辅导</td>
                                    <td>2023-09-13</td>
                                    <td><span class="status-badge status-rejected">已拒绝</span></td>
                                    <td>
                                        <div class="table-actions">
                                            <button class="btn-icon" title="查看详情">
                                                <i class="bi bi-eye"></i>
                                            </button>
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                
                <div class="recent-card">
                    <div class="recent-header">
                        <h3>最新用户</h3>
                        <a href="users.html" class="view-all">查看全部</a>
                    </div>
                    <div class="recent-body">
                        <div class="user-list">
                            <div class="user-item">
                                <img src="../../static/avatar-default.png" alt="用户头像" class="user-avatar-md">
                                <div class="user-details">
                                    <div class="user-name">赵明</div>
                                    <div class="user-email">zhaoming@example.com</div>
                                </div>
                                <div class="user-joined">2023-09-15</div>
                            </div>
                            <div class="user-item">
                                <img src="../../static/avatar-default.png" alt="用户头像" class="user-avatar-md">
                                <div class="user-details">
                                    <div class="user-name">钱红</div>
                                    <div class="user-email">qianhong@example.com</div>
                                </div>
                                <div class="user-joined">2023-09-14</div>
                            </div>
                            <div class="user-item">
                                <img src="../../static/avatar-default.png" alt="用户头像" class="user-avatar-md">
                                <div class="user-details">
                                    <div class="user-name">孙伟</div>
                                    <div class="user-email">sunwei@example.com</div>
                                </div>
                                <div class="user-joined">2023-09-13</div>
                            </div>
                            <div class="user-item">
                                <img src="../../static/avatar-default.png" alt="用户头像" class="user-avatar-md">
                                <div class="user-details">
                                    <div class="user-name">周丽</div>
                                    <div class="user-email">zhouli@example.com</div>
                                </div>
                                <div class="user-joined">2023-09-12</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="../js/main.js"></script>
    <script src="../js/admin.js"></script>
    <script src="../js/dashboard.js"></script>
</body>
</html>